<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a responsive email layout.">
    <title>XXForm 问卷</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/pure-min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/paper.css}">
    <script th:src="@{/js/vue-min.js}"></script>
    <script th:src="@{/js/main.js}"></script>
</head>
<body>
    <div id="paper">
        <div class="title">{{paper.title}}</div>
        <div class="time">
            <div class="pure-g">
                <div class="pure-u-1-3"></div>
                <div class="pure-u-1-3">修订时间：<span class="mc">{{dateFormat(paper.createTime*1000,'y年m月d日 h:i')}}</span></div>
                <div class="pure-u-1-3 right">编号：<b>{{paper.id}}</b></div>
            </div>
        </div>

        <div class="content" v-if="isFinish">
            <div class="tips">感谢您的参与！</div>
        </div>

        <div class="user-box" v-if="!isFinish">
            <div class="pure-g pure-form">
                <div class="pure-u-1-2">
                    <p>
                        <label>姓名：</label>
                        <input type="text" v-model="userName" ref="user-name" />
                    </p>
                </div>
                <div class="pure-u-1-2">
                    <p>
                        <label>联系方式：</label>
                        <input type="text" v-model="userPhone" ref="user-phone" />
                    </p>
                </div>
            </div>
        </div>

        <div class="content" v-if="!isFinish">
            <div class="subject" v-for="(item) in subjects" :class="{nob:item.type==3}">
                <div class="sub-tit">
                    {{item.num}}. {{item.subtitle}}
                    <small class="orange" v-if="item.checked">必填</small>
                </div>
                <div class="sub-select">
                    <div class="pure-g" v-if="item.type==3">
                        <div class="pure-u-1 pure-form">
                            <textarea v-model="subjects[item.id].answer"></textarea>
                        </div>
                    </div>
                    <div class="pure-g" v-else>
                        <div class="pure-u-1-4" v-for="(k,n) in item.options.split('\n')">
                            <label><input :type="item.type==1?'radio':'checkbox'" :name="'s-'+item.id" :value="k" @change="setValue(item.id, k, $event)">
                                {{tn[n]}}. {{k}}
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="submit" v-if="!isFinish">
            <button type="button" class="pure-button btn-green" @click="send">提交答卷</button>
        </div>

    </div>
<script>
    const vue = new Vue({
        el: '#paper',
        data: {
            offset: 0,
            pid: '[[${paperId}]]',
            tn: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'],
            isFinish: false,
            userName: '',
            userPhone: '',
            paper: {
                id: '0',
                title: '-',
                createTime: 0
            },
            subjects: {}
        },
        methods: {
            init: function () {
                this.loadPaper();
            },
            send: function () {
                if (this.userName == '') {
                    alert('请填写姓名');
                    this.$refs['user-name'].focus();
                    return;
                }
                if (this.userPhone == '') {
                    alert('请留下联系电话');
                    this.$refs['user-phone'].focus();
                    return;
                }
                let d = [];
                for (let i in this.subjects) {
                    let s = this.subjects[i];
                    if (s.checked == 1 && s.answer == '') {
                        alert('请完成必选题：第 ' + s.num + ' 题');
                        return;
                    }
                    d.push(s);
                }
                let data = {
                    pid: this.pid,
                    name: this.userName,
                    phone: this.userPhone,
                    datas: JSON.stringify(d)
                };
                lets.post('/answer/submit.do', data).then(res => {
                    if (res.code == 1) {
                        this.isFinish = true;
                    } else {
                        alert(res.error);
                    }
                });
            },
            setValue: function (id, v, self) {
                let s = this.subjects[id];
                if (self.target.checked) {
                    if (s.type == 1) {
                        s.answer = v;
                    } else if (s.type == 2) {
                        s.answer += " " + v;
                    }
                } else {
                    if (s.type == 2) {
                        let nv = '';
                        for (let a of s.answer.split(' ')) {
                            if (a != ' ' && a != v) {
                                nv += ' ' + a;
                            }
                        }
                        s.answer = nv.trim();
                    }
                }
                this.subjects[id] = s;
            },
            loadPaper: function () {
                lets.get('/paper/get.do/' + this.pid).then(res => {
                    if (res.code == 1) {
                        this.paper = res.result;
                        this.loadSubject();
                    }
                });
            },
            loadSubject: function () {
                lets.post('/subject/getList.do', {pid: this.pid}).then(res => {
                    if (res.code == 1) {
                        //this.subjects = res.result;
                        let answer = {};
                        let i = 0;
                        for (let s of res.result) {
                            answer[s.id] = s;
                            answer[s.id]['num'] = ++i;
                            answer[s.id]['answer'] = '';
                        }
                        this.subjects = answer;
                    }
                });
            }
        }
    });
    vue.init();
</script>
</body>
</html>